const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')




module.exports = {
    // 注意这里是双下划线
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: {
        open: true,
        port: 8000,
        // contentBase: 'src',
        hot: true
    },
    // 配置插件的节点
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack Plugin Sample',
            template: './src/index.html'
        }),
        new VueLoaderPlugin()
    ],
    // 这个节点用于配置所有第三方模块加载器
    module: {
        // 所有第三方模块匹配规则
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                // limit 给定的值，是图片的大小，单位是byte，如果我们引用的图片， 大于给定的1imit值，
                // 则不会被转为base64格式的字符串，如果图片小于给定的limit 值，则会被转为base64的字符串
                // 等于我用的4.4版本会报错
                use: 'url-loader?limit=9438&name=[hash:8]-[name].[ext]'
            },
            {
                test: /\.(eot|ttf|svg|woff|woff2)$/,
                use: 'url-loader'
            },
            //配置babel来转换ES6高级的语法
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]

    },
    mode: 'development'
    //通过Babel ，可以帮我们将高级的语法转换为低级的语法
    // 1.在webpack 中，可以运行如下两套命令， 安装两套包，去安装Babel 相关的loader功能:
    // 1.1第一套包: cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    // 1.2第二套包: cnpm i babel-preset-env babel-preset-stage-0 -D
    // 2.打开webpack的配置文件， 在module 节点下的rules数组中，添加一个新的匹配规则:
    // 2.1 { test:/\.js$/，use: 'babel-loader', exclude: /node_modules/}
    // 2.2注意:在配置babel的loader规则的时候，必须把node_modules 目录，通过exclude选项排除掉:
    // 原因有俩:
    // 2.2.1 如果不排除node modules，则Babel 会把node_ modules 中所有的第三方JS 文件，
    // 都打包编译，这样，会非常消耗CPU，同时,打包速度非常慢;
    // 2.2.2哪怕，最终, Babel 把所有node_modules 中的Js转换完毕了,但是，项目也无法正常运行!
    // 3.在项目的根目录中，新建一个 叫做 .babelrc的Babel配置文件，这个配置文件,属于JSON格式，
    // 所以，在写 .babelrc 配置的时候，必须符合JSON语法规范:不能写注释 ，字符串必须用双引号
    // 3.1在 .babelrc写如下的配置:大家可以把preset 翻译成 [语法] 的意思


}